<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>远程目录树浏览器</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.0/css/layui.css">
    <style>
        .container { padding: 20px; }
        .tree-container { border: 1px solid #e6e6e6; padding: 15px; min-height: 400px; background-color: #fafafa; }
        .status-info { margin: 10px 0; padding: 10px; background-color: #f0f9ff; border-left: 4px solid #1e90ff; }
        .error-info { margin: 10px 0; padding: 10px; background-color: #fff5f5; border-left: 4px solid #f56565; color: #e53e3e; }
        .loading { text-align: center; padding: 20px; color: #666; }
    </style>
</head>
<body>
    <div class="container">
        <!-- 连接信息表单 -->
        <div class="layui-card">
            <div class="layui-card-header">远程主机连接</div>
            <div class="layui-card-body">
                <div class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">主机名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="hostName" placeholder="如: server1" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">IP地址</label>
                            <div class="layui-input-inline">
                                <input type="text" id="hostIP" placeholder="192.168.1.100" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">端口</label>
                            <div class="layui-input-inline" style="width: 80px;">
                                <input type="number" id="hostPort" value="22" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="username" placeholder="root" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="password" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">初始路径</label>
                            <div class="layui-input-inline">
                                <input type="text" id="initialPath" value="/" placeholder="/home/user" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button type="button" id="connectBtn" class="layui-btn">连接主机</button>
                        <button type="button" id="loadTreeBtn" class="layui-btn" disabled>加载目录树</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 状态显示 -->
        <div id="statusInfo" class="status-info" style="display: none;">
            <span id="statusText"></span>
        </div>
        <div id="errorInfo" class="error-info" style="display: none;">
            <span id="errorText"></span>
        </div>

        <!-- 目录树 -->
        <div class="layui-card">
            <div class="layui-card-header">目录结构</div>
            <div class="layui-card-body">
                <div class="tree-container">
                    <div id="loading" class="loading" style="display: none;">
                        <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                        正在加载...
                    </div>
                    <ul id="directoryTree"></ul>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.8.0/layui.js"></script>
    
    <script>
        const socket = io();
        let connectionId = null;
        
        layui.use(['tree', 'layer'], function(){
            const tree = layui.tree;
            const layer = layui.layer;
            
            // DOM元素
            const connectBtn = document.getElementById('connectBtn');
            const loadTreeBtn = document.getElementById('loadTreeBtn');
            const statusInfo = document.getElementById('statusInfo');
            const errorInfo = document.getElementById('errorInfo');
            const statusText = document.getElementById('statusText');
            const errorText = document.getElementById('errorText');
            const loading = document.getElementById('loading');
            
            function showStatus(message) {
                statusText.textContent = message;
                statusInfo.style.display = 'block';
                errorInfo.style.display = 'none';
            }
            
            function showError(message) {
                errorText.textContent = message;
                errorInfo.style.display = 'block';
                statusInfo.style.display = 'none';
            }
            
            function hideAllInfo() {
                statusInfo.style.display = 'none';
                errorInfo.style.display = 'none';
            }
            
            // 连接远程主机
            connectBtn.addEventListener('click', function() {
                const hostName = document.getElementById('hostName').value.trim();
                const hostIP = document.getElementById('hostIP').value.trim();
                const hostPort = document.getElementById('hostPort').value.trim();
                const username = document.getElementById('username').value.trim();
                const password = document.getElementById('password').value.trim();
                
                if (!hostIP || !username || !password) {
                    layer.msg('请填写IP地址、用户名和密码', {icon: 2});
                    return;
                }
                
                showStatus('正在连接远程主机...');
                connectBtn.disabled = true;
                
                socket.emit('connect_remote_host', {
                    name: hostName,
                    host: hostIP,
                    port: hostPort || 22,
                    username: username,
                    password: password
                });
            });
            
            // 加载目录树
            loadTreeBtn.addEventListener('click', function() {
                if (!connectionId) {
                    layer.msg('请先连接远程主机', {icon: 2});
                    return;
                }
                
                const path = document.getElementById('initialPath').value.trim() || '/';
                
                loading.style.display = 'block';
                document.getElementById('directoryTree').innerHTML = '';
                showStatus(`正在加载目录: ${path}`);
                
                socket.emit('get_remote_directory_tree', {
                    connection_id: connectionId,
                    path: path
                });
            });
            
            // Socket.IO事件
            socket.on('connect', function() {
                showStatus('已连接到服务器');
            });
            
            socket.on('connection_response', function(response) {
                connectBtn.disabled = false;
                
                if (response.error) {
                    showError(response.error);
                } else if (response.success) {
                    connectionId = response.connection_id;
                    showStatus(response.message);
                    loadTreeBtn.disabled = false;
                }
            });
            
            socket.on('directory_tree_response', function(response) {
                loading.style.display = 'none';
                
                if (response.error) {
                    showError(response.error);
                    return;
                }
                
                if (response.success && response.data) {
                    hideAllInfo();
                    
                    tree.render({
                        elem: '#directoryTree',
                        data: response.data,
                        showCheckbox: false,
                        id: 'directoryTreeId',
                        isJump: false,
                        click: function(obj) {
                            console.log('选中:', obj.data.title);
                        }
                    });
                    
                    showStatus(`加载完成: ${response.path} (${response.data.length} 项)`);
                }
            });
        });
    </script>
</body>
</html>